<template>
    <PageView class="my-table-demo">
        <MyTable :columns="columns" :data="tableData">
            <template #search="slotProps">
                <el-button @click="slotProps.query({ auth: 'xxx' })">sss</el-button>
            </template>
            <el-table-column prop="phone" label="手机" />
            <el-table-column prop="status2" label="自定义状态2">22</el-table-column>
            <!-- slotProps  -->
            <template v-slot:status2="{ text, row, index }"> {{ row.name }} - {{ text }} - {{ index }}</template>
        </MyTable>
    </PageView>
</template>

<script>
/**
 * MyTable 组件示例。正确的做法是通过自动化测试来完成。
 */

export default {
    name: 'MyTableDemo',
    components: {},
    data() {
        return {
            pageData: {
                currentPage: 1,
                pageSize: 10,
                total: 400
            },
            columns: [
                {
                    prop: 'id',
                    label: 'Id'
                },
                {
                    prop: 'name',
                    label: '姓名'
                },
                {
                    prop: 'status',
                    label: '状态',
                    formatData: function (val) {
                        console.log(val)
                        return val == true ? '启用' : '禁用'
                    }
                },
                {
                    prop: 'status2',
                    label: '城农网',
                    // isSlot: true,
                    scopedSlots: { customRender: 'status2' }
                },
                {
                    prop: 'operation',
                    label: '操作',
                    operation: [
                        { name: '修改', type: 'primary', clickFun: this.handleClick },
                        { name: '删除', type: 'danger', clickFun: this.delClick }
                    ]
                }
            ],
            tableData: [
                {
                    id: '001',
                    name: 'xxx',
                    phone: '123',
                    status: true,
                    status2: true
                }
            ]
        }
    },
    methods: {
        handleClick(row, index, event) {
            console.log(row, index, event)
        },
        delClick(row, index, event) {
            console.log(row, index, event)
        }
    }
}
</script>
